<template>
    <div class="attach-selector">
        <template v-if="modelValue">
            <div class="file-name" :title="modelValue.name">
                {{ modelValue.name }}
            </div>
            <div class="iconfont icon-del" @click="delFile()"></div>
        </template>
        <el-upload v-else name="file" :show-file-list="false" accept=".zip,.rar" multiple="false"
            :http-request="selectFile">
            <el-button type="primary">选择文件</el-button>
        </el-upload>
    </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();

const props = defineProps({
    modelValue: {
        type: Object,
        default: null
    }
})

const emit = defineEmits();

const selectFile = async (file) => {
    file = file.file
    emit("update:modelValue", file)
}

const delFile = () => {
    emit("update:modelValue", null)
}
</script>

<style lang="scss">
.attach-selector {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .file-name {
        overflow: hidden;
        color: var(--link);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .iconfont {
        width: 20px;
        cursor: pointer;
        margin-left: 20px;
    }
}
</style>
